<template>
<div class="login">
	<div class="logo"><img src="" alt=""></div>
	<div class="form">
		<label><input type="text" placeholder="请输入手机号/天机卡号" v-model="username"></label>
		<label>
			<input :type="isLook ? 'text' : 'password'" placeholder="请输入登录密码" v-model="password">
			<i class="iconfont icon-Close" v-show="!isLook" @click='isLook = !isLook'></i>
			<i class="iconfont icon-yanjing" v-show="isLook" @click='isLook = !isLook'></i>
		</label>
		<div class="btn">
			<router-link to='/user/newUser'>新用户注册</router-link>
			<router-link to='/user/forgetPass'>忘记密码？</router-link>
		</div>
		<input type="button" :disabled='!disabled' :class='{active:disabled}' @click='loginEv' class="submit" value="登录">
	</div>
</div>
</template>

<script>
import { login } from '../../config/getData.js'
import { mapActions, mapState, mapMutations} from 'vuex'
import { getStore } from '../../config/mUtils'

export default {
	data(){
		return {
			isLook: false,
			username:'',
			password:''
		}
	},
	computed: {
		disabled(){
			return !!this.username && !!this.password
		}
	},
	mounted(){
		this.getUserInfo({
			'id':'123',
            'userType':'3',
            'avatar':'https://tianyou001.oss-cn-beijing.aliyuncs.com/photo/faa450680c014046be1fbddce82910401525762460582.png'
		})
	},
	methods: {
		...mapActions([
			'getUserInfo'
		]),
		loginEv(){
			login(this.username,this.password,true).then( res => {
				res = res.rows;
				if(!res.id){
					alert(res.msg)
				}else{
					this.getUserInfo({
						'id': res.id,
            'userType': res.userType,
            'avatar': res.photo
					})

					if(getStore('userInfo')['userType'] == 3 ) this.$router.push('/rescue/task')
					else this.$router.push('/rescue/task');
				}
			})
		}
	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/all';
input[type=text]:focus, input[type=password]:focus, textarea:focus { box-shadow: 0 0 0 1000px white inset;color:#333;}


.login{position: absolute;left:0;top:0;width:100%;height: 100%;background-color: white;
	.logo{@include wh(76px,88px); display: block;margin:90px auto 80px;background: url('../../assets/images/logo.png') no-repeat 0 0/100% 100%;}
	.form{width:90%;margin:0 auto;
		label{display: block;margin-top:10px;position: relative;
			input{border:none;border-bottom:1px solid $e6;width:100%;height: 16px;line-height: 16px;padding:15px 0;background-color: transparent;font-size:16px;}
			.iconfont{position: absolute;right:0;top:50%;transform: translateY(-50%);padding:10px;}
		}
		.btn{display: flex;justify-content: space-between;margin:28px 0 37px;}
	}
}
</style>

